<script setup>
import { ElMessageBox } from "element-plus";
import { ref } from "vue";

import TransmitterInfoPanel from "../components/TransmitterInfoPanel.vue";
import PowerControlCard from "../components/PowerInfoCard .vue";
import StatusMetricsCard from "../components/StatusInfoCard.vue";



// 示例数据
const tableData = [
    {
        transmitter: "Tx1",
        model: "JRS-953",
        location: "万倾沙",
        control: "本控",
        powerLevel: "全功率",
        paStatus: "On",
        highVoltage: "On",
        channel: 46,
        mode: "SSBs",
        frequency: 12577.5,
        outputPower: 5602,
        pf: 4980,
        pr: 30,
        vswr: 1.16,
        epa: 120,
        ipa: 138,
        eac: 380,
        status: "报警",
    },
    {
        transmitter: "Tx2",
        model: "JRS-954",
        location: "万倾沙222",
        control: "本控",
        powerLevel: "全功率",
        paStatus: "On",
        highVoltage: "On",
        channel: 46,
        mode: "SSBs",
        frequency: 12577.5,
        outputPower: 4950,
        pf: 4980,
        pr: 30,
        vswr: 1.16,
        epa: 120,
        ipa: 138,
        eac: 380,
        status: "正常",
    },
    // 更多发射机数据...
];

// 弹窗的显示控制
const dialogVisible = ref(false);
const currentIndex = ref(0); // 当前选中的发射机索引
const selectedTransmitter = ref(tableData[currentIndex.value]);

// 处理双击事件
function handleRowDblClick(row, index) {
    console.log("sjian");

    currentIndex.value = index;
    selectedTransmitter.value = row;
    dialogVisible.value = true;
}

// 右键点击处理函数
function handleRightClick(row, column, event) {
    if (row.status === "报警") {
        event.preventDefault(); // 阻止默认的右键菜单
        ElMessageBox.alert(`报警信息: ${row.transmitter} 设备有报警`, "报警信息", {
            confirmButtonText: "确定",
            type: "warning",
        });
    }
}

// 切换到上一台发射机
function previousTransmitter() {
    if (currentIndex.value > 0) {
        currentIndex.value--;
        selectedTransmitter.value = tableData[currentIndex.value];
    }
}

// 切换到下一台发射机
function nextTransmitter() {
    if (currentIndex.value < tableData.length - 1) {
        currentIndex.value++;
        selectedTransmitter.value = tableData[currentIndex.value];
    }
}
</script>

<template>
    <!-- 显示数据用的表格 -->
    <el-table :data="tableData" class="data_table" @row-contextmenu="handleRightClick"
        @row-dblclick="handleRowDblClick">
        <el-table-column prop="transmitter" label="发射机" width="80" />
        <el-table-column prop="model" label="型号" width="100" />
        <el-table-column prop="location" label="站点" />
        <el-table-column prop="control" label="遥控" width="100" />
        <el-table-column prop="highVoltage" label="高压" width="100" />
        <el-table-column prop="channel" label="信道" width="80" />
        <el-table-column prop="mode" label="模式" width="100" />
        <el-table-column prop="powerLevel" label="功率等级" width="100" />
        <el-table-column label="状态" width="100">
            <template #default="{ row }">
                <el-tag :type="row.status === '报警' ? 'danger' : 'success'" effect="dark">
                    {{ row.status }}
                </el-tag>
            </template>
        </el-table-column>
    </el-table>

    <!-- 弹出窗口 -->
    <el-dialog v-model="dialogVisible" title="发射机详细信息">
        <div v-if="selectedTransmitter">
            <!-- 发射机信息面板 -->
            <TransmitterInfoPanel :selectedTransmitter="selectedTransmitter" />

            <!-- 最底下左右两个信息 -->
            <el-row gutter="20">
                <el-col class="bottom_left_data" :span="10" :xs="24">
                    <!-- ----- 控制状态 ----- -->
                    <PowerControlCard :selectedTransmitter="selectedTransmitter" />
                </el-col>

                <el-col class="bottom_right_data" :span="14 " :xs="24">
                    <!-- ----- 数据 ----- -->
                    <StatusMetricsCard :selectedTransmitter="selectedTransmitter" />
                </el-col>
            </el-row>

            <el-row> </el-row>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
    </el-dialog>
</template>

<style scoped>
.data_table {
    width: 100%;
}
</style>
